<template>
  <div class="edit-user">
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()" />
    <van-cell-group>
      <!--
        第一步：点击其它的组件 作用到文件选择对象 this.$refs.inputFile.click()
        第二步：在input上绑定change事件，拿到改变后的值 this.$refs.inputFile.files[0]
        第三步：对参数进步一处理  new FormData() 把参数加入到这里面去
       -->
      <!-- 这是隐藏的文件选择对象 -->
      <input type="file" hidden ref="inputFile" @change="fileChange">
      <van-cell @click="profileClick" class="profile" title="头像" is-link>
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #default>
          <van-image
            round
            width="75"
            height="75"
            :src="userInfo.photo"
          />
        </template>
      </van-cell>
      <van-cell title="名称" :value="userInfo.name" is-link @click="clickName" />
      <van-cell title="性别" is-link @click="clickGender">
        <template #default>
          <div>{{ userInfo.gender === 0 ? '男' : '女' }}</div>
        </template>
      </van-cell>
      <van-cell title="生日" :value="userInfo.birthday" is-link @click="clickBirthday" />
    </van-cell-group>
    <!-- 修改用户名的弹出层 -->
    <van-dialog v-model="showDialog" title="修改名称" show-cancel-button @confirm="confirmClick">
      <van-field v-model="newUser.name" placeholder="请输入用户名" />
    </van-dialog>
    <!-- 修改性别的弹出层 -->
    <van-dialog v-model="showDialogGender" title="修改性别" show-cancel-button @confirm="confirmEditGender">
      <van-radio-group v-model="curGender" @change="changeRadio" direction="horizontal">
        <van-radio name="0">男</van-radio>
        <van-radio name="1">女</van-radio>
        {{ curGender }}
      </van-radio-group>
    </van-dialog>
    <!-- 日期选择器 -->
    <van-popup
      v-model="showPopup"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-nav-bar title="修改生日"/>
      <van-datetime-picker
        @confirm="clickConfirmDate"
        @cancel="clickCancelDate"
        v-model="newUser.birthday"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"/>
    </van-popup>
  </div>
</template>

<script>
// 引入时间处理插件
import dayjs from 'dayjs'
import { getProfile, updatePhoto, updateUserInfo } from '@/api/user'
export default {
  name: 'EditUser',
  data () {
    return {
      userInfo: {}, // 获取用户信息
      showDialog: false, // 控制修改名称的弹出层是否显示
      showDialogGender: false, // 控制性别弹出层
      showPopup: false, // 控制时间弹出层的显示
      newUser: {}, // 新的用户对象
      minDate: new Date(1965, 0, 10),
      maxDate: new Date(),
      curGender: 0
      // currentDate: new Date()
    }
  },
  methods: {
    // 获取用户编辑资料
    hGetProfile () {
      getProfile().then(res => {
        // console.log(res.data.data)
        this.userInfo = res.data.data
      })
    },
    // 点击头像
    profileClick () {
      this.$refs.inputFile.click()
    },
    // 选择图片之后
    fileChange () {
      // console.log(this.$refs.inputFile.files[0])
      const fd = new FormData()
      fd.append('photo', this.$refs.inputFile.files[0])
      updatePhoto(fd).then(res => {
        // console.log(res)
        this.$toast.success('修改头像成功!')
        // 同步改变之后的信息
        this.hGetProfile()
      })
    },
    // 点击修改名称
    clickName () {
      // 打开弹出层
      this.showDialog = true
      // 名称数据回填
      // this.newUser.name = this.userInfo.name
      // 这样写his.newUser.name是响应式的
      this.$set(this.newUser, 'name', this.userInfo.name)
    },
    // 点击弹出层的确认按钮
    confirmClick () {
      if (this.newUser.name.length > 7) {
        this.$toast.success('名称不能大于7位!')
        return false
      }
      updateUserInfo({ name: this.newUser.name }).then(res => {
        // console.log(res)
        this.$toast.success('修改名称成功!')
        // 同步改变之后的信息
        this.hGetProfile()
      })
    },
    // 点击性别
    clickGender () {
      this.showDialogGender = true
      this.curGender = String(this.userInfo.gender)
      // this.newUser.gender = this.userInfo.gender
    },
    // 监听性别
    changeRadio (type) {
      // console.log(type)
      this.curGender = type
      console.log('改变：', this.curGender)
    },
    // 确认修改性别
    confirmEditGender () {
      // console.log(1)
      console.log(typeof this.curGender)
      updateUserInfo({ gender: Number(this.curGender) }).then(res => {
        console.log(res)
        this.$toast.success('修改性别成功!')
        // 同步改变之后的信息
        // this.hGetProfile()
        this.userInfo.gender = this.userInfo.gender === 1 ? 0 : 1
      })
    },
    // 点击生日
    clickBirthday () {
      this.showPopup = true // 弹出层显示
      this.newUser.birthday = new Date(this.userInfo.birthday)
    },
    // 点击确认日期
    clickConfirmDate (date) {
      // console.log(date)
      // 注意后端要求的时间格式为 `YYYY-MM-DD`
      const formatDate = dayjs(date).format('YYYY-MM-DD')
      // console.log(formatDate)
      updateUserInfo({ birthday: formatDate }).then(res => {
        // console.log(res)
        this.showPopup = false
        this.$toast.success('修改生日成功!')
        // 同步改变之后的信息
        this.hGetProfile()
      })
    },
    // 点击取消选择时间
    clickCancelDate () {
      this.showPopup = false
    }
  },
  mounted () {
    this.hGetProfile()
  }
}
</script>

<style lang="less" scoped>
.profile {
  display: flex;
  align-items: center;
}
/deep/.van-dialog__content {
  padding: 20px;
}
</style>
